<!--
 * @Author: atdow
 * @Date: 2021-08-02 11:37:41
 * @LastEditors: null
 * @LastEditTime: 2021-08-09 11:02:05
 * @Description: file description
-->
<template>
    <div class="form-tree-table">
        <el-dialog
            title=""
            :visible.sync="dialogVisible"
            width="50%"
            :before-close="handleClose"
        >
            <el-input placeholder="请输入" v-model="filterText"> </el-input>
            <el-tree
                class="filter-tree"
                :checkedKeys="[]"
                :default-checked-keys="defaultCheckedKeys"
                :data="data"
                node-key="id"
                show-checkbox
                :filter-node-method="filterNode"
                @check="check"
                ref="tree"
                :props="defaultProps"
            >
            </el-tree>
            <span slot="footer" class="dialog-footer">
                <el-row type="flex" justify="center">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="sure">确 定</el-button>
                </el-row>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { getFormTree } from "@/api/dataManagement/dataMonitor/dataStatistics";
export default {
    name: "form-tree-table",
    props: {},
    data() {
        return {
            dialogVisible: false,
            data: [
                // {
                //     id: 1,
                //     label: "一级 1",
                //     children: [
                //         {
                //             id: 4,
                //             label: "二级 1-1",
                //             children: [
                //                 {
                //                     id: 9,
                //                     label: "三级 1-1-1"
                //                 },
                //                 {
                //                     id: 10,
                //                     label: "三级 1-1-2"
                //                 }
                //             ]
                //         }
                //     ]
                // },
                // {
                //     id: 2,
                //     label: "一级 2",
                //     children: [
                //         {
                //             id: 5,
                //             label: "二级 2-1"
                //         },
                //         {
                //             id: 6,
                //             label: "二级 2-2"
                //         }
                //     ]
                // },
                // {
                //     id: 3,
                //     label: "一级 3",
                //     children: [
                //         {
                //             id: 7,
                //             label: "二级 3-1"
                //         },
                //         {
                //             id: 8,
                //             label: "二级 3-2"
                //         }
                //     ]
                // }
            ],
            // tableList:[],
            defaultProps: {
                children: "children",
                label: "dirName"
            },
            checkedKeys: [],
            checkedNodes:[],
            defaultCheckedKeys: [],
            filterText: ""
        };
    },
    components: {},
    watch: {
        filterText(val) {
            // console.log("val:", val);
            this.$refs.tree.filter(val);
        }
    },
    computed: {},
    created() {
        // this.getTreeData();
    },
    mounted() {},
    methods: {
        show(id = []) {
            this.defaultCheckedKeys = id;
            this.checkedKeys = id;
            this.$refs.tree?.setCheckedKeys(id);
            this.dialogVisible = true;
            if (Object.keys(this.data).length === 0) {
                this.getTreeData();
            }
        },
        getTreeData() {
            getFormTree().then(res => {
                if (res.code !== 200) {
                    return;
                }

                this.data = res.data?.children || [];
                // const tableList = []
                // cursion(this.data )
                // function cursion(list){
                //     list.forEach(listItem => {
                //         // if(listItem.dirName==='汇总数据（DWS）'){
                //         //     console.log("listItem:", listItem)
                //         //     if(listItem.isTable === true){
                //         //         console.log(555)
                //         //     }
                //         // }
                //         if(listItem.isTable === true){
                //             tableList.push(listItem?.id)
                //         }
                //         // if(listItem.id===16){
                //         //     console.log(16,listItem)
                //         // }

                //         if(listItem?.children){
                //             cursion(listItem?.children || [])
                //         }
                //     })
                // }
                // this.tableList = tableList
                // console.log("tableList:",this.tableList)
            });
        },
        handleClose(done) {
            this.$confirm("确认关闭？")
                .then(_ => {
                    done();
                })
                .catch(_ => {});
        },
        filterNode(value, data) {
            // console.log("data:", data);
            if (!value) return true;
            return data.dirName.indexOf(value) !== -1;
        },
        sure() {
            this.dialogVisible = false;
            // console.log("this.checkedKeys:",this.checkedKeys)
            // let tableList = this.tableList
            // let keys = this.checkedKeys.filter(checkedKeysItem => {
            //     console.log("checkedKeysItem:",checkedKeysItem,this.tableList)
            //     return tableList.indexOf(checkedKeysItem) !== -1
            // })
            // console.log("keys:",keys)
            this.$emit("sure", this.checkedKeys);
        },
        check(current, data) {
            // console.log("data:", data);
            // console.log("current:", current);
            const { checkedKeys = [] ,checkedNodes = []} = data;
            // console.log("checkedNodes:",checkedNodes)
            let key = []
            checkedNodes.forEach(checkedNodesItem=>{
                if(checkedNodesItem.isTable === true){
                    key.push(checkedNodesItem.id)
                }
            })
            // console.log("key:",key)
            this.checkedKeys = key;
            // console.log("current:", current);
        }
    },
    beforeDestroy() {}
};
</script>

<style lang="scss" scoped></style>
